<template>
  <div class="notice-page">
    <el-card class="mb-4">
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-lg font-bold text-gray-800">全部班级通知</h2>
        <el-button type="primary" size="small" @click="goBack">返回</el-button>
      </div>

      <!-- 通知列表 -->
      <div v-if="notices.length > 0" class="space-y-4">
        <div v-for="notice in notices" :key="notice.id" class="border rounded-lg p-4 hover:shadow-md transition-shadow cursor-pointer">
          <div class="flex justify-between items-start">
            <h3 class="font-medium text-gray-800">
              <el-link type="primary" @click="viewNoticeDetail(notice.id)">
                {{ notice.title }}
              </el-link>
            </h3>
            <!-- <el-badge :value="notice.isRead ? '已读' : '未读'" :type="notice.isRead ? 'success' : 'info'" /> -->
          </div>
          <p class="text-gray-600 mt-2 line-clamp-2">{{ notice.content || '无具体内容' }}</p>
          <div class="flex justify-between items-center mt-3 text-sm text-gray-500">
            <span>{{ formatDate(notice.createTime) }} </span>
            <span>{{ notice.studentRole  }}</span>
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-else class="p-4 text-center text-gray-500">
        暂无通知记录
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { getLatestClassNotices } from '@/api/student';
import { useUserStore} from '@/store/user';

// const route = useRoute();
const router = useRouter();
const userStore = useUserStore();
console .log(userStore.userInfo.studentId)
const studentId = ref(userStore.userInfo.studentId || null);
const notices = ref([]);
const isLoading = ref(false);

// 日期格式化函数
const formatDate = (dateStr) => {
  return new Date(dateStr).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  });
};

// 获取通知列表
const fetchNoticeList = async () => {
  isLoading.value = true;
  try {
    const response = await getLatestClassNotices({
      studentId: studentId.value,
      pageSize: 10
    });
    if (response.code === 0) {
      notices.value = response.data;
    }
    console.log(response.data);
  } catch (error) {
    console.error('获取通知列表失败:', error);
  } finally {
    isLoading.value = false;
  }
};

// 返回按钮
const goBack = () => {
  router.go(-1);
};

// 查看通知详情
const viewNoticeDetail = (id) => {
  router.push({ name: 'ClassNoticeDetail', params: { id } });
};

// 生命周期钩子
onMounted(() => {
  if (studentId.value) {
    fetchNoticeList();
  }
});
</script>

<style scoped>
.notice-page {
  padding: 20px;
}

/* 限制内容显示两行 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>